/**
 * Created by zkfr on 2017/9/5.
 */
$(function () {
    var fn = ABUS.Fn;
    var $el = $('#detailContainer');

    //点击收藏与取消收藏
    $('#like').on('touchend',function () {
        if($(this).attr('src') == 'images/blue.png'){
            $(this).attr('src','images/red.png')
        }else{
            $(this).attr('src','images/blue.png')
        }
    });

    //详情与购买须知点击切换列表
    $el.find('.detail_introduce li').on('touchend',function () {
        $(this).children('div').addClass('current');
        $(this).siblings('li').children('div').removeClass('current');
        $el.find('.content_introduce').eq($(this).index()).show()
                                      .siblings('.content_introduce').hide();
    });

    //轮播图

    var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    });


    //倒计时
    fn.get({
        url:'./simdata/countdown.json',
        success:function (data) {
            if(data.result ==1){
                var setTime = new Date(data.data.startTime).getTime();
                var lastTime = new Date(data.data.stopTime).getTime();
                window.setInterval(function () {
                var currentTime = new Date().getTime();
                var difference_1 = Math.floor((currentTime - lastTime)/1000);
                var difference = Math.floor((setTime - currentTime)/1000);
                if(difference >= 0){
                    $el.find('.status').show();
                    $el.css('margin-top','0.6rem');
                        var hour = Math.floor(difference/3600);
                        var minute = Math.floor(difference%3600/60);
                        var second = Math.floor(difference%60);
                        if(hour >= 10&&hour < 100){
                            hour = '0'+hour
                        }
                        if(hour < 10){
                            hour = '00'+hour
                        }
                        if(minute < 10){
                            minute = '0'+minute
                        }
                        if(second < 10){
                            second = '0'+second
                        }
                        var text = hour + ':' + minute + ':' +second;
                        $el.find('.down').text('距离开始 ' + text)

                }else if(difference < 0&&difference_1 < 0){
                    $el.css('margin-top','0');
                    $el.find('.status').hide();
                    //$('#fixedBottom').hide();
                    //$('#fixedBottom_2').hide();
                    //$('#fixedBottom_1').show();
                }else if(difference_1 >= 0){
                    $el.css('margin-top','0.6rem');
                    $el.find('.status').hide();
                    $el.find('.status_1').show();
                    //$('#fixedBottom').hide();
                    //$('#fixedBottom_1').hide();
                    //$('#fixedBottom_2').show();
                }
                },1000)

            }else{
                fn.alert({
                    type:"error",
                    title:data.message
                })
            }
        }
    });

    fn.get({
        url:'./simdata/cinemaType.json',
        data:{},
        success:function (data) {
            if(data.result == 1){
                $('#cinemaUpLayer').renderTemp(data);
                $('#cinemaList li').on('click',function () {
                    $(this).addClass('active').siblings().removeClass('active');
                    if($(this).hasClass('active')){
                        $(this).children('img').attr('src','images/check.png');
                        $(this).siblings().children('img').attr('src','images/uncheck.png');
                    }
                })

            }else{
                fn.alert({
                    type:"error",
                    title:data.message
                })
            }
        }
    });

    $('#fixedBottom_1').on('touchend',function () {
        fn.get({
            url:'./simdata/price.json',
            data:{},
            success:function (data) {
                if(data.result == 1){
                    data = data.data;
                    fn.count({
                        template:'\
                            <div class="down_layer">\
                            <div class="layer_top_1">\
                            <div class="layer_top_left">\
                            <div class="img_border">\
                            <img class="buy_pic" src="images/swiper_pic.png"/>\
                            </div>\
                            </div>\
                            <div class="layer_top_title">\
                            <div class="price_1">\
                            <span class="font26 colorff4 bold">' + data.virtual + '</span>\
                            <span class="font26 color000">U币</span>\
                            <img src="images/jia.png"/>\
                            <span class="font26 colorff4 bold">' + data.price + '</span>\
                            <span class="font26 color000">元</span>\
                            </div>\
                            <img class="closeLayer" src="images/close.png"/>\
                            </div>\
                            </div>\
                            <div class="buy_number">\
                            <div class="buy_left">\
                            <span class="font28 colora0">购买数量：</span>\
                            </div>\
                            <div class="buy_right">\
                            <div class="right_1" id="reduce"></div>\
                            <div class="right_2 font26 color31 bold" id="countNumber">1</div>\
                            <div class="right_3" id="add"></div>\
                            </div>\
                            </div>\
                            <div class="buy_number buy_money">\
                            <div class="buy_left">\
                            <span class="font28 colora0">应付金额：</span>\
                            </div>\
                            <div class="money_right">\
                            <span class="font36 colorff4 bold" id="totalPrice">' + data.price + '</span>\
                            <span class="font26 color000 bold">元</span>\
                            </div>\
                            </div>\
                            </div>',

                        onShow:function () {
                            var number;
                            $('#add').on('touchend',function () {
                                number = parseInt($('#countNumber').text());
                                number = number + 1 ;
                                $('#countNumber').text(number);
                                $('#totalPrice').text(data.price * number)
                            });
                            $('#reduce').on('touchend',function () {
                                number = parseInt($('#countNumber').text());
                                number = number - 1 ;
                                if(number == 0){
                                    return false
                                }
                                $('#countNumber').text(number);
                                $('#totalPrice').text(data.price * number)
                            })
                        }
                    });
                    return false;
                }else{
                    fn.alert({
                        type:"error",
                        title:data.message
                    })
                }
            }
        });

        /*fn.cinema({
            template:'\
            <div class="up_layer">\
            <div class="layer_top">\
            <div class="layer_top_left">\
            <div class="img_border">\
            <img class="movie_pic" src="images/movie_pic.png"/>\
            </div>\
            </div>\
            <div class="layer_top_title">\
            <p class="font24 color000">电影《战狼2》兑换券奉上,体贴的我们还一次备足两张</p>\
            <img class="closeLayer" src="images/close.png"/>\
            </div>\
            </div>\
            <ul class="cinema_list" id="cinemaList">\
            <li>\
            <img src="images/uncheck.png"/>\
            <div class="cinema_details">\
            <div class="details_1">\
            <span class="font24 color31">2017年11月11日</span>\
            <span class="font24 color31">15:30-18:00</span>\
            </div>\
            <div class="details_2">\
            <span class="font24 color31">星美国际影城(北京金源IMAX店)</span>\
            <span class="font24 colorff4 bold">50.8</span>\
            <span class="font24 color69">元起</span>\
            </div>\
            <div class="details_3">\
            <span class="font20 colora0">北京市海淀区远大路1号金源时代购物中心5层东首511</span>\
            </div>\
            <div class="details_4 color9fa">\
            <span class="font22 color69">共有名额</span>\
            <span class="font30 color508 bold">6000</span>\
            <span class="font22 color69 b1">人</span>\
            |\
            <span class="font22 color69 b2">剩余名额</span>\
            <span class="font30 colorff4 bold">6000</span>\
            <span class="font22 color69">人</span>\
            </div>\
            </div>\
            </li>\
            <li>\
            <img src="images/uncheck.png"/>\
            <div class="cinema_details">\
            <div class="details_1">\
            <span class="font24 color31">2017年11月11日</span>\
            <span class="font24 color31">15:30-18:00</span>\
            </div>\
            <div class="details_2">\
            <span class="font24 color31">星美国际影城(北京金源IMAX店)</span>\
            <span class="font24 colorff4 bold">50.8</span>\
            <span class="font24 color69">元起</span>\
            </div>\
            <div class="details_3">\
            <span class="font20 colora0">北京市海淀区远大路1号金源时代购物中心5层东首511</span>\
            </div>\
            <div class="details_4 color9fa">\
            <span class="font22 color69">共有名额</span>\
            <span class="font30 color508 bold">6000</span>\
            <span class="font22 color69 b1">人</span>\
            |\
            <span class="font22 color69 b2">剩余名额</span>\
            <span class="font30 colorff4 bold">6000</span>\
            <span class="font22 color69">人</span>\
            </div>\
            </div>\
            </li>\
            <li>\
            <img src="images/uncheck.png"/>\
            <div class="cinema_details">\
            <div class="details_1">\
            <span class="font24 color31">2017年11月11日</span>\
            <span class="font24 color31">15:30-18:00</span>\
            </div>\
            <div class="details_2">\
            <span class="font24 color31">星美国际影城(北京金源IMAX店)</span>\
            <span class="font24 colorff4 bold">50.8</span>\
            <span class="font24 color69">元起</span>\
            </div>\
            <div class="details_3">\
            <span class="font20 colora0">北京市海淀区远大路1号金源时代购物中心5层东首511</span>\
            </div>\
            <div class="details_4 color9fa">\
            <span class="font22 color69">共有名额</span>\
            <span class="font30 color508 bold">6000</span>\
            <span class="font22 color69 b1">人</span>\
            |\
            <span class="font22 color69 b2">剩余名额</span>\
            <span class="font30 colorff4 bold">6000</span>\
            <span class="font22 color69">人</span>\
            </div>\
            </div>\
            </li>\
            <li>\
            <img src="images/uncheck.png"/>\
            <div class="cinema_details">\
            <div class="details_1">\
            <span class="font24 color31">2017年11月11日</span>\
            <span class="font24 color31">15:30-18:00</span>\
            </div>\
            <div class="details_2">\
            <span class="font24 color31">星美国际影城(北京金源IMAX店)</span>\
            <span class="font24 colorff4 bold">50.8</span>\
            <span class="font24 color69">元起</span>\
            </div>\
            <div class="details_3">\
            <span class="font20 colora0">北京市海淀区远大路1号金源时代购物中心5层东首511</span>\
            </div>\
            <div class="details_4 color9fa">\
            <span class="font22 color69">共有名额</span>\
            <span class="font30 color508 bold">6000</span>\
            <span class="font22 color69 b1">人</span>\
            |\
            <span class="font22 color69 b2">剩余名额</span>\
            <span class="font30 colorff4 bold">6000</span>\
            <span class="font22 color69">人</span>\
            </div>\
            </div>\
            </li>\
            </ul>\
            <div class="layer_bottom" id="layer_bottom">\
            <span class="font32 colorfff">参&nbsp;与</span>\
            </div>\
            </div>',

            onShow:function () {
                $('#cinemaList li').on('click',function () {
                    $(this).addClass('active').siblings().removeClass('active');
                    /!*if($(this).children('img').src)*!/
                    if($(this).hasClass('active')){
                        $(this).children('img').attr('src','images/check.png');
                        $(this).siblings().children('img').attr('src','images/uncheck.png');
                    }
                })
            }
        });
        return false*/
    });


});